import React, { Component } from 'react';
import './Wode.scss'
import { NavBar ,Toast,Modal} from 'antd-mobile'
import { CollectMoneyOutline, ReceivePaymentOutline, GiftOutline, TruckOutline, MessageOutline, EnvironmentOutline, BillOutline, KoubeiOutline,MoreOutline } from 'antd-mobile-icons'
import * as service from '../../api'

class Wode extends Component {
    constructor(props) {
        super(props)
        this.state = {
            arr: []
        }
    }
    async componentDidMount() {
        if(!window.localStorage.getItem('token')){
            this.props.history.replace('/login')
        }
        var res = await service.user_info({ userid: window.localStorage.getItem('userid') })
        // console.log(res);
        this.setState({
            arr: res.data.data
        })
    }
    render() {
        return (
            <div className='wode'>
                <NavBar style={{
                    '--height': '50px',
                    '--border-bottom': '1px #eee solid',
                }} backArrow={false} right={<MoreOutline
                    onClick={async () => {
                      const result = await Modal.confirm({
                        content: '确定要退出登录吗',
                      })
                      if (result) {
                        window.localStorage.removeItem('token')
                        Toast.show({ content: '退出成功',icon: 'success', position: 'center' })
                        this.props.history.replace('/login')
                      } else {
                        Toast.show({ content: '取消成功',icon: 'success', position: 'center' })
                      }
                    }}/>}>我的
                </NavBar>
                {
                    this.state.arr.map((item, index) => {
                        return (
                            <div className="main" key={index}>
                                <div className="touxiang">
                                    <img src="" alt="" />
                                </div>
                                <p>{item.tel}</p>
                            </div>
                        )
                    })
                }

                <div className="dingdan">
                    <p className='p1'>我的订单</p>
                    <div className="dai">
                        <div><span><CollectMoneyOutline /></span><p id='p1'>全部订单</p></div>
                        <div><span><ReceivePaymentOutline /></span><p id='p1'>代付款</p></div>
                        <div><span><GiftOutline /></span><p id='p1'>待发货</p></div>
                        <div><span><TruckOutline /></span><p id='p1'>待收货</p></div>
                        <div><span><MessageOutline /></span><p id='p1'>待评价</p></div>
                    </div>
                </div>
                <div className="dingdan">
                    <p className='p1'>工具包</p>
                    <div className="dai">
                        <div><span><EnvironmentOutline /></span><p id='p1'>收货地址</p></div>
                        <div><span><BillOutline /></span><p id='p1'>领券中心</p></div>
                        <div><span><TruckOutline /></span><p id='p1'>我的快递</p></div>
                        <div><span><KoubeiOutline /></span><p id='p1'>官方客服</p></div>
                        <div><span><MessageOutline /></span><p id='p1'>我的评价</p></div>
                    </div>
                </div>
            </div>
        );
    }
}

export default Wode;